<template>
  <div class="agency-wrapper">
    <div class="agency-wrapper-content">
      <el-row class="agency-info-wrapper">
        <div class="preview-wrapper">
          <div class="agency-count">
            <span class="icon"></span>
            <span class="count">{{productDetail.product.number}}人</span>
          </div>
          <pic-preview
            :productDetail="productDetail"
            :images-list="productDetail.product.product_img"
          ></pic-preview>
        </div>
        <div class="info-wrapper">
          <div class="name">
            <i class="label-category">{{productDetail.product.product_area}}</i>
            <span
              v-show="productDetail.product.product_name"
              class="product_name"
            >{{productDetail.product.product_name}}</span>
            <span
              v-show="productDetail.product.product_place"
              class="level"
            >/{{productDetail.product.product_place}}</span>

            <div class="release">发布时间：{{productDetail.product.create_time | parseTime}}</div>
          </div>
          <div class="value-wrapper">
            <el-row class="info-p">
              <span class="title">总价值：</span>
              <span class="price">
                ￥
                <span class="count">{{productDetail.product.product_amount}}</span>
              </span>
            </el-row>
            <el-row class="info-p">
              <span class="title">总代理订金：</span>-
            </el-row>
            <el-row class="info-p">
              <span class="title">商品单价：</span>
              <span>{{productDetail.product.product_price}}</span>
              <span
                v-show="productDetail.product.product_unit"
              >/{{productDetail.product.product_unit}}</span>
            </el-row>
          </div>
          <el-row class="info-p">
            <span class="title">所在仓库：</span>
            <span class="margin-span">{{productDetail.product.product_warehouse}}</span>
          </el-row>
          <el-row class="info-p">
            <span class="title">库存：</span>
            <span class="margin-span">
              {{productDetail.product.real_stock}}
              <span
                v-show="productDetail.product.product_unit"
              >{{productDetail.product.product_unit}}</span>
            </span>
          </el-row>
          <el-row class="info-p">
            <span class="title">代理费率：</span>
            <span>{{(productDetail.agent.agent_rate*100).toFixed(4)}}%</span>
            <img
              class="info-tips"
              src="@/assets/tips.png"
              title="指代理商成功将该商品销售出去后，优选商家按实际销售金额数的一定比例支付给代理商的费用"
              alt
            />
          </el-row>
          <el-row class="info-p">
            <span class="title">代理期限：</span>
            <span>{{productDetail.agent.agent_time ? productDetail.agent.agent_time + '个月' : '无限期'}}</span>
            <img class="info-tips" src="@/assets/tips.png" title="该产品的可代理时长" alt />
          </el-row>
          <el-row class="info-p">
            <span class="title">当前进度：</span>
            <el-progress
              :percentage="Number(parseFloat(productDetail.agent.rate * 100).toFixed(2)) || 0"
            ></el-progress>
          </el-row>
          <el-row class="dividing-line"></el-row>
          <el-row class="agency-btn-wrapper">
            <el-button
              type="primary"
              class="agency-btn"
              @click="pay"
              :disabled="productDetail.product.start_status == 4"
            >马上代理</el-button>
          </el-row>
        </div>

        <div class="store-info-wrapper">
          <store-info :information="productDetail.store"></store-info>
          <!-- <div class="business-img" v-show="productDetail.store.businessImg">
          <img :src="productDetail.store.businessImg" alt />
          </div>-->
          <div class="business-btn">
            <div class="left">
              <img src="../../assets/hall/cardIcon.png" alt />
              <span>营业执照</span>
            </div>
            <span class="btn" @click="businessHandle">查看</span>
          </div>
          <el-dialog
            custom-class="img-dialog"
            :visible.sync="imgFlag"
            :lock-scroll="false"
            :fullscreen="true"
          >
            <img :src="productDetail.store.businessImg" alt />
          </el-dialog>
        </div>
      </el-row>
      <el-row class="other-info-wrapper">
        <el-col class="explain-info-wrapper">
          <explain-info
            :detail="productDetail.product.product_detail"
            :goodsId="productDetail.product.product_id"
          ></explain-info>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import PicPreview from "./components/pic-preview";
import StoreInfo from "./components/store-info";
import ExplainInfo from "./components/explain-info";
import { getProductDetail, checkPassword, checkToken } from "@/api/agency";

export default {
  name: "agencynodetail",
  data() {
    return {
      imgFlag: false,
      productDetail: {
        product: {},
        agent: {},
        password: {},
        store: {},
      },
    };
  },
  created() {
    this._getDetail();
  },
  computed: {
    total_deposit() {
      return (
        this.productDetail.agent.agent_each_copies_deposit * this.agencyCount
      );
    },
  },
  methods: {
    businessHandle() {
      if (this.productDetail.store.businessImg) {
        this.imgFlag = true;
      } else {
        this.$message.error("暂时无法查看营业执照，请联系客服");
      }
    },
    _getDetail() {
      getProductDetail({ product_id: this.$route.params.id }).then((res) => {
        this.productDetail.product = res.data.product;
        this.productDetail.agent = res.data.agent;
        this.productDetail.password = res.data.password;
        this.productDetail.store = res.data.store;
      });
    },
    pay() {
      this.$router.push({
        name: "payno",
        params: { id: this.$route.params.id },
      });
    },
  },
  components: {
    PicPreview,
    StoreInfo,
    ExplainInfo,
  },
};
</script>
// <style lang="scss">
.img-dialog {
  background: rgba(0, 0, 0, 0.5);
  .el-dialog__headerbtn .el-dialog__close {
    color: #ccc;
    font-size: 28px;
    border: 1px solid #fefefe;
    border-radius: 50%;
    padding: 5px;
    position: relative;
    z-index: 999;
    top: 20px;
    right: 20px;
    &:hover {
      // background: #fe6018;
      color: #fe6018;
      border-color: #fe6018;
    }
  }
  .el-dialog__body {
    height: 90%;
    position: relative;
    z-index: 888;
    img {
      width: 45%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.agency-wrapper {
  .el-progress {
    .el-progress-bar {
      width: 68%;
      .el-progress-bar__outer {
        height: 8px !important;
        background: #e5e5e5;
        margin-left: 0;
        border-radius: initial;
        .el-progress-bar__inner {
          border-radius: initial;
        }
      }
    }
    .el-progress__text {
      margin-left: 13px;
    }
  }
}
// .agency-wrapper {
//   width: 100%;
//   height: 100%;
//   overflow: auto;
//   min-width: 1465px;
//   position: relative;
//   padding: 20px;
//   .agency-info-wrapper {
//     background: #fff;
//     display: flex;
//     padding: 50px 0 50px 200px;
//     .preview-wrapper {
//       padding: 0 10px;
//     }
//     .info-wrapper {
//       margin-left: 20px;
//       padding-top: 40px;
//       .info-p {
//         display: flex;
//         line-height: 34px;
//         padding: 0 10px;
//         font-size: 14px;
//         color: #333;
//         .title {
//           flex: 0 0 100px;
//           color: #999;
//           text-align: right;
//           margin-right: 20px;
//         }
//         .el-progress{
//           flex:1;
//           display:flex;
//           align-items:center;
//         }
//       }

//       .name {
//         display: flex;
//         width: 500px;
//         .product_name {
//           flex: 1;
//           color: #333;
//           font-size: 20px;
//           font-weight: bold;
//           height: 22px;
//           line-height: 22px;
//           vertical-align: top;
//           width: 0;
//           white-space: nowrap;
//           text-overflow: ellipsis;
//           overflow: hidden;
//         }
//         .level {
//           margin-left: 20px;
//           font-size: 14px;
//           color: #999;
//           text-align: right;
//         }
//         .sku {
//           margin-left: 20px;
//           font-size: 14px;
//           color: #999;
//           text-align: right;
//         }
//       }

//       .value-wrapper {
//         background: #ececec;
//         padding: 5px 0;
//         width: 500px;
//         background: #fffaf7;
//         margin-top: 35px;
//         .price {
//           color: #fa4e33;
//           .count {
//             font-size: 24px;
//             font-weight: bold;
//           }
//         }
//       }
//       .dividing-line {
//         width: 500px;
//         height: 1px;
//         background: #ebf0f2;
//         margin: 20px 0;
//       }
//       .agency-btn-wrapper {
//         margin-top: 30px;
//         display: flex;
//         .agency-btn {
//           width: 130px;
//           height: 45px;
//         }
//         .release {
//           font-size: 14px;
//           color: #999;
//           margin-left: 20px;
//           line-height: 45px;
//         }
//       }
//     }
//   }
//   .other-info-wrapper {
//     margin-top: 20px;
//   }
// }
//
</style>

<style lang="scss" scoped>
.agency-wrapper {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
  padding: 20px;
  .agency-wrapper-content {
    min-width: 1460px;
  }
  .agency-info-wrapper {
    background: #fff;
    display: flex;
    padding: 0 20px 0 37px;
    position: relative;

    .store-info-wrapper {
      width: 18%;
      margin-left: 48px;
      .business-btn {
        width: 100%;
        height: 48px;
        line-height: 48px;
        padding: 0 18px;
        border: 1px solid rgba(235, 240, 242, 1);
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        .left {
          height: 100%;
          line-height: 48px;
          color: #333;
          font-size: 16px;
          img {
            vertical-align: middle;
            margin-bottom: 5px;
            width: 20px;
            height: 17px;
            margin-right: 10px;
          }
        }
        .btn {
          font-size: 15px;
          color: #999;
          cursor: pointer;
          &:hover {
            color: #fe6616;
          }
        }
      }
      .business-img {
        width: 100%;
        max-height: 260px;
        margin-top: 30px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .preview-wrapper {
      padding: 50px 10px;
      position: relative;
      .agency-count {
        position: absolute;
        left: 25px;
        top: 65px;
        padding: 0 17px;
        height: 24px;
        line-height: 24px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.7);
        text-align: center;
        font-size: 12px;
        color: #333;
        z-index: 9;
        .icon {
          display: inline-block;
          width: 10px;
          height: 12px;
          background: url("../../assets/hall/icon-person.png") no-repeat 0 0 /
            100% 100%;
          margin-bottom: -1px;
          margin-right: 6px;
        }
      }
    }
    .info-wrapper {
      margin-left: 25px;
      padding: 50px 0;
      position: relative;
      width: 680px;
      min-width: 600px;
      &::after {
        content: "";
        width: 1px;
        height: 90%;
        background: #ebeff1;
        position: absolute;
        top: 50%;
        right: -20px;
        transform: translateY(-50%);
      }
      .info-p {
        display: flex;
        line-height: 34px;
        padding: 0 10px;
        font-size: 14px;
        color: #333;
        .info-tips {
          width: 14px;
          height: 14px;
          margin: auto 0;
          margin-left: 10px;
        }
        &.info-num {
          margin: 18px 0;
          .title-num {
          }
        }
        &.info-settle {
          flex-direction: column;
          background: #f9f9f9;
          padding-bottom: 10px;
          padding-top: 10px;
          .info-settle-item {
            display: flex;
            &:first-of-type {
              font-size: 18px;
              color: #f94d33;
              .title {
                color: #f94d33;
              }
            }
            &:last-of-type {
              .recharge-btn {
                font-size: 14px;
                color: rgba(32, 131, 241, 1);
                margin-left: auto;
                margin-right: 10px;
                cursor: pointer;
              }
            }
          }
        }
        .title {
          flex: 0 0 100px;
          color: #999;
          text-align: left;
        }
        .max-btn {
          color: #2082f1;
          margin: 0 15px 0 10px;
          cursor: pointer;
        }
        .el-progress {
          flex: 1;
          display: flex;
          align-items: center;
        }
      }

      .name {
        display: flex;
        color: #333;
        font-size: 20px;
        font-weight: bold;
        position: relative;
        .product_name {
          height: 22px;
          line-height: 22px;
          vertical-align: top;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .release {
          position: absolute;
          font-size: 14px;
          color: #999;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
          font-weight: 400;
        }
      }

      .value-wrapper {
        background: #fff3ed;
        padding: 5px 0;
        width: 100%;
        margin: 20px 0 10px 0;
        .price {
          color: #fa4e33;
          font-weight: bold;
          margin-left: -4px;
          .count {
            font-size: 24px;
          }
        }
      }
      .dividing-line {
        width: 100%;
        height: 1px;
        background: #ebf0f2;
        margin: 10px 0;
      }
      .agency-btn-wrapper {
        padding-left: 12px;
        margin-top: 30px;
        display: flex;
        .agency-btn {
          width: 180px;
          height: 48px;
          font-size: 18px;
          font-weight: bold;
        }
      }
    }
  }
  .other-info-wrapper {
    margin-top: 20px;
  }
  .password-wrapper {
    .icon {
      display: block;
      width: 71px;
      height: 77px;
      background: url("../../assets/hall/icon-lockb.png") no-repeat 0 0 / 100%
        100%;
      margin: 0 auto;
    }
    .tips {
      margin-top: 23px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      text-align: center;
    }
    .ipt-wrapper {
      width: 331px;
      margin: 0 auto;
      margin-top: 40px;
      display: flex;
      height: 34px;
      line-height: 34px;
      .title {
        font-size: 16px;
        color: #333;
      }
      input {
        margin-left: 10px;
        width: 225px;
      }
    }
    .el-button {
      display: block;
      width: 140px;
      height: 45px;
      line-height: 45px;
      padding: 0;
      font-size: 16px;
      text-align: center;
      margin: 50px auto;
    }
  }
}

// .password-wrapper {
//     position: fixed;
//     width: 100%;
//     height: 100%;
//     background: rgba(0, 0, 0, 0.3);
//     top: 94px;
//     left: 240px;
//     z-index: 99;
//     transition: all 0.3s ease-in-out;
//     .container {
//       background: #fff;
//       width: 520px;
//       height: 320px;
//       padding-top: 35px;
//       border-radius: 8px;
//       box-shadow: 0px 0px 10px 0px rgba(236, 236, 236, 0.5);
//       position: absolute;
//       top: 50%;
//       left: 50%;
//       margin-top: -185px;
//       margin-left: -360px;
//       .icon {
//         display: block;
//         width: 44px;
//         height: 48px;
//         background: url("../../assets/hall/icon-lockb.png") no-repeat 0 0 / 100%
//           100%;
//         margin: 0 auto;
//       }
//       .tips {
//         margin-top: 20px;
//         font-size: 14px;
//         color: #999;
//         text-align: center;
//       }
//       .ipt-wrapper {
//         margin-top: 40px;
//         display: flex;
//         height: 34px;
//         line-height: 34px;
//         padding: 0 90px;
//         .title {
//           font-size: 16px;
//           color: #333;
//         }
//         input {
//           margin-left: 10px;
//           width: 220px;
//         }
//       }
//       .pwd-btn {
//         display: block;
//         width: 140px;
//         height: 45px;
//         line-height: 45px;
//         background: #ff7f5b;
//         border: none;
//         border-radius: 4px;
//         color: #fff;
//         font-size: 16px;
//         text-align: center;
//         margin: 50px auto;
//         cursor: pointer;
//       }
//     }
//   }
</style>
